<template>
  <PageLayout page-style="background: #f3f7f8;">
    <div class="good-list">
      <div v-for="item in goods" :key="item.id" class="good-item" :class="{ active: productId === item.id }" @click="bindProduct(item)">
        <image class="good-icon" :src="item.image"></image>
        <div class="good-name">{{ item.storeName }}</div>
      </div>
    </div>
    <div class="order-content" style="height: calc(100vh - 120rpx)">
      <ScrollList :finished="isFinished" :loading="isLoading" :show-empty="isFinished && !list?.length" style="height: calc(100vh - 120rpx); width: calc(100vw - 32rpx)" @load="load" @refresh="reset">
        <div class="" style="display: flex; flex-direction: column; gap: 16rpx">
          <template v-for="product in list" :key="product?.id">
            <div class="order-item">
              <div class="user-time">
                <div class="user-cover">
                  <img alt="用户头像" class="user-avatar" :src="product.payUserInfo?.avatar" />
                  <div class="name">{{ product.payUserInfo?.nickname }}</div>
                </div>
                <div class="time">{{ product.kTime }}</div>
              </div>
              <div class="product-detail">
                <view class="product-image-content">
                  <image :src="product?.cartInfo[0]?.productInfo?.image" class="product-image" mode="aspectFill" />
                </view>

                <view class="product-info">
                  <text class="truncate product-title">{{ product?.cartInfo[0]?.productInfo?.storeName }}</text>
                  <text class="truncate product-profile">已选：{{ product?.cartInfo[0]?.productInfo?.attrInfo.sku }}</text>
                  <view class="product-meta">
                    <text class="product-price">合计{{ product?.payPrice }}</text>
                    <text class="product-sales"> |   单件 {{ product?.cartInfo[0]?.productInfo?.attrInfo.price }}</text>
                  </view>
                </view>
              </div>
            </div>
          </template>
        </div>
      </ScrollList>
    </div>
  </PageLayout>
</template>

<script setup lang="ts">
import PageLayout from '@/components/PageLayout.vue';
import ScrollList from '@/components/scroll-list/scroll-list.vue';
import { usePagination } from '@/hooks/usePagination';
import { getDesignUserProducts, orderDesignList } from '@/api/designUser';
import { onShow } from '@dcloudio/uni-app';
import { ref } from 'vue';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime'; // ES 2015
import updateLocale from 'dayjs/plugin/updateLocale'; // ES 2015
dayjs.extend(relativeTime);
dayjs.extend(updateLocale)
import 'dayjs/locale/zh-cn';
dayjs.locale('zh-cn');

dayjs.updateLocale('en', {
  relativeTime: {
    future: "in %s",
    past: "%s ago",
    s: 'a few seconds',
    m: "a minute",
    mm: "%d minutes",
    h: "an hour",
    hh: "%d hours",
    d: "a day",
    dd: "%d days",
    M: "a month",
    MM: "%d months",
    y: "a year",
    yy: "%d years"
  }
})

const { list, isLoading, load, reset, isFinished } = usePagination(queryProducts);
function queryProducts(page = 1) {
  const data = {
    page: page,
    type: -1,
    productId: productId.value,
  };
  return orderDesignList(data).then((res) => {
    return { data: res.data?.map((item) => ({ ...item, kTime: dayjs(item.createTime).fromNow(true) })) };
  });
}
const goods = ref([]);
const productId = ref(null);
const bindProduct = (item) => {
  productId.value = item.id;
  reset();
};

onShow(() => {
  getDesignUserProducts({ type: 1, limit: 10000, orderBy: 'orders' }).then((res) => {
    goods.value = res.data;
    if (res.data) {
      productId.value = res.data[0].id;
      reset();
    }
  });
});
</script>

<style scoped lang="scss">
.good-list {
  position: sticky;
  top: 0rpx;
  display: flex;
  gap: 16rpx;
  padding: 32rpx 16rpx 16rpx;
  overflow: auto;
  z-index: 9;
  background: #f3f7f8;
  .good-item {
    display: flex;
    align-items: center;
    width: 192rpx;
    height: 64rpx;
    background: #ffffff;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    gap: 8rpx;
    padding: 16rpx;
    &.active {
      background: linear-gradient(90deg, #f32f1a 0%, #f68a2d 100%);
      .good-name {
        color: #ffffff;
      }
    }
    .good-icon {
      flex-shrink: 0;
      width: 48rpx;
      height: 48rpx;
      background: #ffffff;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
    }
    .good-name {
      height: 38rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #222222;
      line-height: 38rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}

.order-content {
  background: #ffffff;
  box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0, 0, 0, 0.08);
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  margin: 16rpx;
}
.order-item {
  height: 242rpx;
  padding: 28rpx 22rpx;
  border-bottom: 1rpx solid #e4e4e4;
  .user-time {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .user-cover {
      display: flex;
      align-items: center;
      gap: 12rpx;
      .user-avatar {
        width: 40rpx;
        height: 40rpx;
        border-radius: 58rpx 58rpx 58rpx 58rpx;
      }
      .name {
        font-weight: bold;
        font-size: 24rpx;
        color: #222222;
        line-height: 34rpx;
      }
    }
    .time {
      flex-shrink: 0;
      min-width: 86rpx;
      font-weight: 400;
      font-size: 24rpx;
      color: #6f6f6f;
      line-height: 32rpx;
    }
  }
  .product-detail {
    display: flex;
    gap: 32rpx;
    margin: 12rpx 0 0;
    .product-image-content {
      .product-image {
        width: 134rpx;
        height: 134rpx;
      }
    }
  }
}
.product-info {
  display: flex;
  flex-direction: column;
  flex: 1;

  padding: 16rpx;

  .product-title {
    display: block;
    width: 100%;
    height: 32rpx;
    font-weight: 400;
    font-size: 24rpx;
    color: #222222;
    line-height: 32rpx;
  }

  .product-profile {
    font-weight: 400;
    font-size: 24rpx;
    color: #6f6f6f;
    line-height: 32rpx;
    text-align: left;
    margin: 8rpx 0 12rpx;
  }

  .product-meta {
    display: flex;
    align-items: center;
    margin: 8rpx 0 0;
    gap: 8rpx;
    font-weight: bold;
    font-size: 24rpx;
    color: #F25A27;
    line-height: 28rpx;
    .product-price {
      height: 38rpx;
      font-weight: bold;
      font-size: 28rpx;
      text-align: left;
    }

    .product-sales {
      font-weight: 400;
      font-size: 20rpx;
      color: #F25A27;
    }
  }
}
</style>
